<template>
  <div class="app-container">
    <manage-table
      :table-name="tableName"
      :service="service"
      :default-model="defaultModel"
      :table-options="options"
      ref="manageTable">
      <template #tableColumnActionOnReadOnlySuffix="{ row, actions }">
        <Authority :visible="actions.update">
          <el-button type="text" :icon="icons.RefreshLeft" style="color: #e6a23c" @click="resetPassword(row)">
            重置密码
          </el-button>
          <el-button type="text" :icon="icons.Odometer" style="color: #e6a23c" @click="setAuthority(row)">
            设置权限
          </el-button>
        </Authority>
      </template>
      <template #tableColumnActionOnNormalSuffix="{ row, actions }">
        <Authority :visible="actions.update">
          <el-button type="text" :icon="icons.RefreshLeft" style="color: #e6a23c" @click="resetPassword(row)">
            重置密码
          </el-button>
          <el-button type="text" :icon="icons.Odometer" style="color: #e6a23c" @click="setAuthority(row)">
            设置权限
          </el-button>
        </Authority>
      </template>
    </manage-table>
    <AuthorityDialog :current="current" :set-visible="setVisible" :visible="visible" />
  </div>
</template>

<script lang="ts">
  import defaultSettings from '@/settings';
  import ManageTable from '@/components/Table/ManageTable/index.vue';
  import { Options } from '@/components/Table/types';
  import { User, userService } from '@/services/authorization/User';
  import { RowStatus } from '@/components/Table/hooks/useTable';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { HttpUtil } from '@/utils/HttpUtil';
  import { defineComponent, ref } from 'vue';
  import { useVisible } from '@/hooks/useVisible';
  import AuthorityDialog from '@/views/system/User/AuthorityDialog.vue';
  import { TableRow } from '@/components/Table/ManageTable/model';
  import { RefreshLeft, Odometer } from '@element-plus/icons-vue';

  export default defineComponent({
    name: 'UserTable',
    components: {
      AuthorityDialog,
      ManageTable,
    },
    setup() {
      const tableName = 'user';
      const defaultModel: Partial<User> = {
        id: undefined,
        username: undefined,
        nickname: undefined,
        gender: false,
        phone: undefined,
        email: undefined,
        avatar: defaultSettings.defaultAvatar,
        status: 0,
      };
      const options: Options<User> = {
        username: {
          type: 'value',
          label: '用户名',
          readOnly: (model: User) => (model as unknown as RowStatus).rowStatus === 2,
        },
        nickname: {
          type: 'value',
          label: '呢称',
        },
        gender: {
          type: 'binary-category',
          label: '性别',
          mappings: [
            {
              label: '男',
              value: false,
            },
            {
              label: '女',
              value: true,
            },
          ],
        },
        phone: {
          type: 'value',
          label: '电话',
        },
        email: {
          type: 'value',
          label: '电子邮箱',
        },
        // avatar: {
        //   type: 'value',
        //   label: '头像',
        //   readOnly: true
        // },
        status: {
          type: 'category',
          label: '状态',
          mappings: [
            {
              label: '正常',
              value: 0,
            },
            {
              label: '禁用',
              value: 1,
            },
            {
              label: '已注销',
              value: 2,
            },
          ],
        },
      };
      const resetPassword = async (row: User & RowStatus) => {
        console.log(row);
        try {
          try {
            await ElMessageBox.confirm(`此操作将重置用户 ${row.username} 的密码, 是否继续?`, '警告', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            });
          } catch (e) {
            return;
          }
          const resp = await userService.resetPassword(row.id);
          if (HttpUtil.isCreated(resp)) {
            ElMessage.success('重置密码重功！初始密码为123456');
          }
        } catch (e) {
          ElMessage.error('重置密码失败！');
        }
      };
      const { setVisible, visible } = useVisible();
      const current = ref(null as TableRow | null);
      const setAuthority = (row: TableRow) => {
        current.value = row;
        setVisible();
      };
      const clearCurrent = () => {
        current.value = null;
      };
      return {
        tableName,
        service: userService,
        defaultModel,
        options,
        resetPassword,
        visible,
        setVisible: () => {
          setVisible();
          clearCurrent();
        },
        current,
        setAuthority,
        icons: {
          RefreshLeft,
          Odometer,
        },
      };
    },
  });
</script>
